@import './_reset.scss';
@import './_ver.scss';
@import './_mixin.scss';

header{
    @include Type;

    > .logo {
         width: 189px;
         height: 100px;
         position: relative;

        > img{
        width: 190px;
        height: 60px;
        margin: 0 auto;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto
       }
    }

}

section{
    min-height: 570px;
    margin: 10px 0;


    >main{
        @include Type;
        height: 600px;
        display: flex;

        > a{
            width: 600px;
            height: 100%;
        }

        >.login_c{
            flex: 1;
            position: relative;


            >form{
                width: 400px;
                height: 500px;
                background-color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;


                >.login_name {
                    width: 100%;
                    height: 60px;
                    box-sizing: border-box;
                    padding: 5px 20px;
                    font-size: 20px;
                    border-bottom: 1px solid gray;
                    @include CenTer;

                    color: orange;
                }


                >.login_center{
                    display: flex;
                    flex-direction: column;
                    padding-top: 40px;


                    >input{
                        width: 350px;
                        height: 40px;
                        font-size: 20px;
                        box-sizing: border-box;
                        padding-left: 40px;
                        border: 1px solid black;
                        margin: 10px auto;
                    }

                    > .forget{
                       margin-top: 50px;
                       box-sizing: border-box;
                       padding-right: 30px;

                       display: flex;
                       justify-content: end;
                       align-items: center;

                       &:hover{
                        color: orange
                       }
                    }

                    > button{
                        width: 350px;
                        height: 40px;
                        box-sizing: border-box;
                        margin: 10px auto;
                        background-color: orange;
                        color: white;
                        font-size: 20px;
                    }

                    >.error{
                        box-sizing: border-box;
                        margin-bottom: 10px;
                        padding-right: 30px;
                        color: red;
                        text-align: center;
                        display: none
                    }

                    >.register {
                        @include CenTer;
                        > span{
                            color:orange;
                            text-decoration: underline
                        }
                    }
                }
            }
        }
        

    }

    // > main{
    //     width: 2500px;
    //     height: 600px;
    //     margin: 0 auto; 
    //     background-color: pink;
    //     position: relative;


    //     > div{
    //         @include Type;
    //         height: 600px;
    //         background-color: green;
    //         position: absolute;
    //         top: 0;
    //         left: 0;
    //         bottom: 0;
    //         right: 0;
    //         margin: auto;
    //     }
    // }

//     > main {
//         width: 2500px;
//         height: 600px;
//         margin: 0 auto; 

//        > .img{
//         position: fixed; 
//        }

//         >.main_c{
//         @include Type;
//         height: 600px;
//         background-color: blue;
//         z-index: 9999;
//         // position: absolute;
//         // top: 0;
//         // left: 1010px;
//         // display: flex;

//         >.login_a {
//            width: 600px;
//            height: 600px;
//            background-color: pink;

//            > a{
//             display: block;
//             width: 100%;
//             height: 100%;
//            }
//         }
//     }
// }




}

footer{
    @include Type;
    height: 600px;
    background-color: skyblue;
    font-size: 60px;
    @include CenTer;
}